<template>
  <div>
    <div class="main">
      <el-card>
        <div slot="header" class="card-header">
          <span>
            <h1>生菜配香烤五花肉</h1>
            <span class="author-name">王楷</span>
            <span class="ctime"> 2020-12-21</span>
          </span>
          <div>
            <el-tooltip
              effect="dark"
              :content="isGuanzhu ? '取消关注' : '关注作者'"
              placement="top"
            >
              <el-button
                :type="isGuanzhu ? 'danger' : 'info'"
                icon="iconfont icon-guanzhu"
                circle
                @click="goGuanzhu()"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              :content="isDianzan ? '取消赞' : '点赞'"
              placement="top"
            >
              <el-button
                :type="isDianzan ? 'primary' : 'info'"
                icon="iconfont icon-dianzan"
                circle
                @click="goDianzan()"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="评论" placement="top">
              <el-button
                type="info"
                icon="iconfont icon-pinglun"
                circle
                @click="goComment()"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              :content="isShoucang ? '取消收藏' : '收藏'"
              placement="top"
            >
              <el-button
                :type="isShoucang ? 'warning' : 'info'"
                icon="iconfont icon-shoucang"
                circle
                @click="goShoucang()"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="加入菜单" placement="top">
              <el-button
                type="info"
                icon="iconfont icon-caidan"
                circle
                @click="goTianjia()"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="举报" placement="top">
              <el-button
                type="info"
                icon="iconfont icon-jubao"
                circle
                @click="goJubao()"
              ></el-button>
            </el-tooltip>
          </div>
        </div>
        <picure-view :list="picList"></picure-view>
        <!-- <div>
          <el-divider content-position="left">简介</el-divider>
        </div> -->
        <div class="miaoshu">夏天吃这个好啊！！</div>
        <div>
          <el-divider content-position="left">
            <i class="el-icon-fork-spoon el-icon--left"></i>
            食材明细</el-divider
          >

          <div class="shicai-infos">
            <div class="shicai-box">
              <div class="shicai-title">主料</div>
              <div class="shicai-list">
                <div
                  class="shicai-list-node"
                  v-for="i in 3"
                  :key="i"
                  @click="$router.push('/shicai/1')"
                >
                  <h1 class="node-title">猪肉</h1>
                  <span class="node-count">20kg</span>
                </div>
              </div>
            </div>

            <div class="shicai-box">
              <div class="shicai-title">辅料</div>
              <div class="shicai-list">
                <div class="shicai-list-node" v-for="i in 7" :key="i" @click="$router.push('/shicai/1')">
                  <h1 class="node-title">葱花</h1>
                  <span class="node-count">20kg</span>
                </div>
              </div>
            </div>

            <div class="shicai-box">
              <div class="shicai-list">
                <div class="shicai-list-node">
                  <h1 class="node-title">酸甜</h1>
                  <span class="node-count">口味</span>
                </div>
                <div class="shicai-list-node">
                  <h1 class="node-title">煮</h1>
                  <span class="node-count">工艺</span>
                </div>
                <div class="shicai-list-node">
                  <h1 class="node-title">十分钟</h1>
                  <span class="node-count">耗时</span>
                </div>
                <div class="shicai-list-node">
                  <h1 class="node-title">简单</h1>
                  <span class="node-count">难度</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-divider content-position="left"
            ><i class="el-icon-fork-spoon el-icon--left"></i> 做法步骤
          </el-divider>
          <div class="step-list">
            <div v-for="(item, i) in stepList" :key="i" class="step-node">
              <div class="step-count">
                {{ i + 1 }}
              </div>
              <a :href="item.pic" target="view_window"
                ><img :src="item.pic" alt=""
              /></a>
              <span class="node-text"> {{ item.text }}</span>
            </div>
          </div>
        </div>
        <div>
          <el-divider content-position="left"
            ><i class="el-icon-fork-spoon el-icon--left"></i> 小窍门</el-divider
          >
          <div>
            1、根据肉片的厚薄控制腌制的咸淡和煎烤的时间。
            2、可以将烤肉刷层蜂蜜，别具风味且颜色更加诱人。
            3、嫌麻烦的话不用签子，直接卷着吃就好。
          </div>
        </div>

        <div>
          <el-divider content-position="left"></el-divider>
        </div>
        <div id="commentarea">
          <h1>评论区</h1>
        </div>
        <div class="comment-box">
          <div>
            <div v-if="$store.state.myInfo.id != 0">
              <a-comment>
                <a-avatar
                  slot="avatar"
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  alt="王楷"
                />
                <div slot="content">
                  <a-form-item>
                    <a-textarea
                      :rows="4"
                      :value="commentText"
                      @change="handleCommentEditChange"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-button
                      html-type="submit"
                      :loading="submitting"
                      type="primary"
                      @click="handleSubmit"
                    >
                      发布评论
                    </a-button>
                  </a-form-item>
                </div>
              </a-comment>
            </div>

            <div class="can-not-commit" v-else>
              <span class="link-btn" @click="goLogin()">登录</span
              >后才能发表评论哦~
            </div>
          </div>

          <a-list
            v-if="comments.length"
            :data-source="comments"
            :header="`${comments.length} ${
              comments.length > 1 ? '条评论' : '条评论'
            }`"
            item-layout="horizontal"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-comment
                :author="item.author"
                :avatar="item.avatar"
                :content="item.content"
                :datetime="item.datetime"
              />
            </a-list-item>
          </a-list>
        </div>
      </el-card>
    </div>
    <!-- 加入菜单框 -->
    <el-dialog title="加入菜单" :visible.sync="showTianjiaBox" width="30%">
      <el-form>
        <el-form-item>
          <el-select :value="tianjiaCaidan">
            <el-option :value="1">菜单1</el-option>
            <el-option :value="2">菜单2</el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="btns">
        <el-button type="primary" @click="doTianjia()">添加</el-button>
        <el-button @click="cancelTianjia()">取消</el-button>
      </div>
    </el-dialog>

    <!-- 举报框 -->
    <el-dialog title="举报" :visible.sync="showJubaoBox" width="30%">
      <el-form>
        <el-form-item>
          <el-checkbox-group v-model="jubaoCheckList">
            <el-checkbox label="做法与描述不匹配"></el-checkbox>
            <el-checkbox label="扰乱社会秩序"></el-checkbox>
            <el-checkbox label="淫秽色情"></el-checkbox>
            <el-checkbox label="广告传销"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="描述详情" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="primary" @click="doJubao()">举报</el-button>
        <el-button @click="cancelJubao()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PicureView from "../common/PicureView.vue";
export default {
  data() {
    return {
      picList: [
        "https://i8.meishichina.com/attachment/recipe/2013/06/28/20130628085825757364709.jpg?x-oss-process=style/p800",
        "https://i8.meishichina.com/attachment/recipe/2013/06/28/20130628091042958191178.jpg?x-oss-process=style/p800",
        "https://i8.meishichina.com/attachment/recipe/2013/06/28/20130628091128766356416.jpg?x-oss-process=style/p800",
      ],
      stepList: [
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/201306/201306280905581372558277.jpg?x-oss-process=style/p320",
          text: "准备材料。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/201306/201306280907171372453563.jpg?x-oss-process=style/p320",
          text:
            "将五花肉片撒上葱姜片、花椒、八角、倒入烤肉酱，少许生抽加盖保鲜膜，放到冰箱腌制1小时。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/2017/11/21/2017112115112430799576572152553.jpg?x-oss-process=style/p320",
          text:
            "将腌好的五花肉沥净水分，用吸油纸拭干，煎锅中放入少许油，煎制。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/201306/201306280907401372676144.jpg?x-oss-process=style/p320",
          text: "注意翻面，煎至肉片变色，肉质收紧即可。",
        },

        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/2017/11/21/2017112115112430838651942152553.jpg?x-oss-process=style/p320",
          text: "将腌肉的料汁滤除香料和葱姜片备用。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/201306/201306280908091372621047.jpg?x-oss-process=style/p320",
          text:
            "烤盘中铺锡纸，将五花肉平铺到烤盘上，刷上一遍料汁，撒上适量孜然粉。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/201306/201306280908451373376036.jpg?x-oss-process=style/p320",
          text:
            "烤箱调制160度，烤大约15——20分钟，中间翻一次面，刷上料汁，撒孜然粉。",
        },
        {
          pic:
            "https://i8.meishichina.com/attachment/recipe/2017/11/21/2017112115112430891206942152553.jpg?x-oss-process=style/p320",
          text: "烤至金红色，卷上洗净的生菜，用竹签串上即可。",
        },
      ],
      zhuliao: [],
      fuliao: [],
      comments: [],
      commentText: "",
      submitting: false,
      isDianzan: true,
      isShoucang: true,
      isGuanzhu: true,
      showJubaoBox: false,
      showTianjiaBox: false,
      tianjiaCaidan: "",
      jubaoText: "",
      jubaoCheckList: [],
    };
  },
  methods: {
    goLogin() {
      this.$emit("toLogin");
    },
    goDianzan() {
      this.isDianzan = !this.isDianzan;
    },
    goShoucang() {
      this.isShoucang = !this.isShoucang;
    },
    goGuanzhu() {
      this.isGuanzhu = !this.isGuanzhu;
    },
    goTianjia() {
      this.showTianjiaBox = true;
    },
    goJubao() {
      this.showJubaoBox = true;
    },
    doTianjia() {
      this.$msg.success("添加成功");
      this.cancelTianjia();
    },
    doJubao() {
      this.$msg.success("举报成功");
      this.cancelJubao();
    },
    cancelTianjia() {
      this.showTianjiaBox = false;
    },
    cancelJubao() {
      this.showJubaoBox = false;
    },
    handleSubmit() {
      if (!this.commentText) {
        return;
      }

      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: "王楷",
            avatar:
              "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            content: this.commentText,
            datetime: this.$moment().fromNow(),
          },
          ...this.comments,
        ];
        this.commentText = "";
      }, 1000);
    },
    handleCommentEditChange(e) {
      this.commentText = e.target.value;
    },
    goComment() {
      this.$el.querySelector("#commentarea").scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐。默认值
      });
    },
  },
  components: { PicureView },
};
</script>

<style lang="less" scoped>
.main {
  width: 960px;
  margin: 0 auto;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .author-name {
      color: #333;
      &:hover {
        cursor: pointer;
        color: #fabc2a;
      }
    }
    .ctime {
      color: #333;
      padding: 10px;
    }
    h1 {
      font-weight: 600px;
    }
  }
  .picture-view {
    width: 90%;
    height: 500px;
    border: 5px solid #f2edeb;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .miaoshu {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 3px dashed #eee;
    font-size: 16px;
  }
  .el-divider {
    margin: 30px 0;
    color: #f05365;
  }
  .el-divider__text {
    font-size: 20px;
    color: #f05365;
  }
  .shicai-infos {
    .shicai-box {
      padding: 20px;
      border-radius: 15px;
      border: 2px solid #eee;
      margin: 30px auto;
      position: relative;
      .shicai-title {
        position: absolute;
        left: 20px;
        top: 0;
        transform: translate(0, -50%);
        padding: 0 10px;
        font-size: 20px;
        background-color: #fff;
      }
      .shicai-list {
        width: 874px;
        margin: 0 auto;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        .shicai-list-node {
          width: 25%;
          padding: 10px;
          // background-color: antiquewhite;
          text-align: center;
          .node-title {
            line-height: 20px;
            font-size: 20px;
            transition: 0.3s all;
          }
          &:hover {
            cursor: pointer;
            color: #fabc2a;
            .node-title{
            color: #fabc2a;

            }
          }
          .node-count {
            color: #666;
          }
        }
      }
    }
  }
  .step-list {
    margin: 20px 0;
    .step-node {
      margin: 15px 0;
      border: 1px solid #eee;
      border-radius: 10px;
      display: flex;
      align-items: center;
      position: relative;
      .step-count {
        color: white;
        min-width: 50px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #f05365;
        height: 120px;
        line-height: 100px;
        text-align: center;
        font-size: 20px;
        padding: 10px;
      }
      img {
        width: 180px;
        height: 120px;
        object-fit: cover;
      }
      .node-text {
        padding: 20px;
        font-size: 20px;
      }
    }
  }

  .can-not-commit {
    width: 100%;
    line-height: 60px;
    text-align: center;
  }
}
</style>

